<template>
    <div id="list">

      <!--<navBar title="留言反馈"></navBar>-->

      <div>
        <span>
          <input type="text" v-model="feedBackValue">
          <mt-button size="large" @click="addFeedBack" type="default">新增留言</mt-button>
        </span>
      </div>

      <ul class="mui-table-view" v-for="(item, index) in list" :key="index">
        <li class="mui-table-view-cell mui-media">
          <div class="mui-media-body">
            用户: {{ item.title }}
            <p class='mui-ellipsis'>
              {{ item.summary }}
            </p>
          </div>
        </li>
      </ul>

    </div>
</template>

<script>

  import { Toast } from 'mint-ui';

    export default {
        name: "index",
      data(){
        return {
          list:[],
          feedBackValue:""
        }
      },
      methods: {
        addFeedBack(){
          if( this.feedBackValue == "" ){
            Toast({
              message: '留言为空，请输入内容',
              position: 'middle',
              duration: 5000
            });
            return ;
          }
          this.list.unshift({
            id:1,
            title:'留言人11111111',
            summary:this.feedBackValue
          });
          this.feedBackValue = "";
        }
      },
      created(){
          this.$axios.get("/feedback")
            .then(res => {
              console.log(res);
              this.list = res.data.list;
            })
            .catch(err => {
              console.log(err)
            })
      }
    }
</script>

<style scoped>
  #list{
    margin-bottom: 40px;
  }
</style>
